<template>
  <div class="template-index-Lu">
    <commpVxeTable
      :key="reCommpVxeTable"
      :conditionBtnRow="true"
      :config="dataTableConfig"
      :columns="columnsVxe"
      :formItem="formItem"
      @checkboxChange="checkboxChange"
      ref="administrativeOffice"
      @searchEvent="searchEvent"
      @resetEvent="resetEvent"
      >
      <template v-slot:externalOperations="{data}"  >
        <!-- <vxe-form-item>
          <template>
            <a-button class="blue-btn" @click="">添加</a-button>
          </template>
        </vxe-form-item>
        <vxe-form-item>
          <template>
            <a-button class="blue-btn" @click="exportClick">导出</a-button>
          </template>
        </vxe-form-item> -->
      </template>
      <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
        <a-form layout="inline" class="search-form" >
          <a-form-item>
              <!-- <a-button class="blue-btn" style="margin-right: 5px;" @click="installTaoCan(row)">查看</a-button> -->
              <a-button class="blue-btn" style="margin-right: 5px;" @click="exportClick(row)" icon="vertical-align-bottom">下载模板</a-button>
              <!-- <a-button class="red-btn" @click="deleteTaoCan(row.id)">删除</a-button> -->
          </a-form-item>
        </a-form>
      </template>
    </commpVxeTable>
    <applicationForm ref="applicationTable" :formData="formData"></applicationForm>
  </div>
</template>
<script>
import {deleteGztc,exportGztclxMb,} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api.js'
import applicationForm from './applicationForm'
export default {
  components: {
    commpVxeTable,
    applicationForm
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.list,
        rowId: 'id',
        paramet: {}
      },
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '套餐名称',
          field: 'ftcmc',
        },{
          title: '年份',
          field: 'fyear',
          titleInterval:true,
          slots: {
              header:'data1_header',
          }
        },{
          title: '备注',
          field: 'fbz',
          titleInterval:true,
          slots: {
              header:'data2_header',
          }
        },{
          title: '操作',
          field: 'jobid',
          width: 120,
          titleInterval:true,
          slots: {
          // 使用插槽模板渲染
            header:'data3_header',
            default: 'operation_btn',
          },
        }
      ],
      formItem: [
        {
          label: '套餐名称',
          model: 'ftcmc',
        },{
          label: '年份',
          model: 'fyear',
        },{
          label: '备注',
          model: 'fbz',
        },
      ],
      idList: [],
      formData: {},
    }
  },
  methods: {
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
        val.forEach(item => {
            this.idList.push(item.id)
        });
      }
    },
    // 搜索
    searchEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    //
    installTaoCan(row){
      this.formData = row
      this.$nextTick(() => {
        this.$refs.applicationTable.applicationTableVisible = true
      })
    },
    // 删除套餐
    deleteTaoCan(ids){
      var that = this
      that.$confirm({
        title: '您确定要删除这条套餐吗?',
        content: '',
        okText: '确定',
        okType: 'warning',
        cancelText: '取消',
        onOk() {
          deleteGztc({id:ids}).then(res => {
            if(res.code == 200){
              that.reCommpVxeTable = Date.now()
              that.$message.success(res.message)
            } else {
              that.$message.error(res.message)
            }
          })
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    },
    // 导出
    exportClick(row){
      let that = this
      that.$confirm({
        title: '您确定要导出当前模板吗?',
        content: '',
        okText: '确定',
        okType: 'info',
        cancelText: '取消',
        onOk() {
          var fileName = row.ftcmc + '工资套餐模板'
          exportGztclxMb({id: row.id}).then((data) => {
            if (!data) {
                that.$message.warning('文件下载失败')
                return
            }
            if (typeof window.navigator.msSaveBlob !== 'undefined') {
                window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
            } else {
                let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                let link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download', fileName + '.xls')
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link) //下载完成移除元素
                window.URL.revokeObjectURL(url) //释放掉blob对象
            }
          })
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    },
  }
}
</script>
<style>
@import url('../../css/oaClass.css');
</style>

